<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.prime.com.tr/ui" template="/layout/principal.xhtml">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">
            <h:outputText value="Nuevo Formulario" />
        </h1>

        <h:form>
            <p:growl id="growl" showDetail="true" life="3000" />

            <p:wizard widgetVar="wiz" flowListener="#{form.onFlowProcess}" effectSpeed="5000">
                <p:tab id="inicioId" title="Nombre Formulario">
                    <p:panel>
                        <h:messages errorClass="error" />
                        <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
                            <h:outputLabel value="Nombre : * " for="nombreId" />
                            <p:inputText id="nombreId" required="true" label="Nombre" value="#{form.nombre}"
                                style="width: 300px;" />

                            <h:outputLabel value="Descripcion : * " for="descripcionId" />
                            <p:inputText id="descripcionId" required="true" label="Descripcion"
                                value="#{form.descripcion}" style="width: 300px;" />
                        </h:panelGrid>
                    </p:panel>
                </p:tab>
                <p:tab id="tipificacionId" title="Tipificacion">
                    <p:panel>
                        <h:messages errorClass="error" />
                        <h:panelGrid columns="3">
                            <h:outputLabel value="Nombre : * " for="rep1Id" />
                            <p:inputText id="rep1Id" value="Tipificacion" disabled="true" style="width: 300px;" />
                            <h:outputText value="" />

                            <h:outputLabel value="Nombre de item : * " for="rep2Id" />
                            <p:inputText id="rep2Id" value="#{form.itemTipificacion.nombre}" style="width: 300px;" />
                            <p:commandButton value="Add" update="listItemsTipificacionId"
                                action="#{form.reinitTipificacion}">
                                <p:collector value="#{form.itemTipificacion}" addTo="#{form.itemsTipificacion}" />
                            </p:commandButton>

                            <h:outputText value="" />
                            <p:outputPanel id="listItemsTipificacionId">
                                <p:dataTable value="#{form.itemsTipificacion}" var="i">
                                    <p:column headerText="Item">
                                        <h:outputText value="#{i.nombre}" />
                                    </p:column>

                                    <p:column headerText="Operacion">
                                        <p:commandLink value="X" update="@form" process="@this">
                                            <p:collector value="#{i}" removeFrom="#{form.itemsTipificacion}" />
                                        </p:commandLink>
                                    </p:column>
                                </p:dataTable>
                            </p:outputPanel>
                            <h:outputText value="" />
                        </h:panelGrid>
                    </p:panel>
                </p:tab>
                <p:tab id="camposId" title="Detalle Formulario">
                    <p:panel>
                        <h:messages errorClass="error" />
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Nombre del Campo : * " for="etiquetaId" />
                            <p:inputText id="etiquetaId" value="#{form.etiqueta}" required="true" style="width: 300px;" />

                            <h:outputLabel value="Tipo : * " for="tipoId" />
                            <p:selectOneMenu id="tipoId" value="#{form.tipo}" style="width: 200px;">
                                <f:selectItem itemLabel="Tipo Texto" itemValue="TEXT" />
                                <f:selectItem itemLabel="Tipo Lista" itemValue="LIST" />
                                <f:selectItem itemLabel="Tipo Fecha" itemValue="DATE" />
                                <f:selectItem itemLabel="Tipo Area de Texto" itemValue="TEXTAREA" />
                                <p:ajax update="outPanelId" listener="#{form.viewList1}" />
                            </p:selectOneMenu>

                            <h:outputText value="" />
                            <p:outputPanel id="outPanelId">
                                <p:panel rendered="#{form.viewListDetail}">
                                    <h:panelGrid columns="3">
                                        <h:outputLabel value="Nombre de item : * " for="itemId" />
                                        <p:inputText id="itemId" value="#{form.item.nombre}" style="width: 300px;" />

                                        <p:commandButton value="Add" update="listItemsId @parent @form"
                                            action="#{form.reinit}">
                                            <p:collector value="#{form.item}" addTo="#{form.items}" />
                                        </p:commandButton>
                                    </h:panelGrid>
                                    <p:outputPanel id="listItemsId">
                                        <p:dataTable value="#{form.items}" var="i">
                                            <p:column headerText="Item">
                                                <h:outputText value="#{i.nombre}" />
                                            </p:column>

                                            <p:column headerText="Operacion">
                                                <p:commandLink value="X" update="@parent @form" process="@this">
                                                    <p:collector value="#{i}" removeFrom="#{form.items}" />
                                                </p:commandLink>
                                            </p:column>
                                        </p:dataTable>
                                    </p:outputPanel>
                                </p:panel>
                            </p:outputPanel>
                            <h:outputText value="" />
                            <p:commandButton value="Insertar Campo" update="dttCampo camposId" action="#{form.addCampo}"
                                style="width: 200px;" />

                        </h:panelGrid>
                    </p:panel>
                </p:tab>
            </p:wizard>

            <p:dataTable id="dttCampo" rowIndexVar="orden" var="f" value="#{form.listCampo}" paginator="true" rows="10">
                <p:column headerText="Orden">
                    <h:outputText value="#{orden + 2}" />
                </p:column>

                <p:column headerText="Nombre">
                    <h:outputText value="#{f.etiqueta}" />
                </p:column>

                <p:column headerText="Tipo">
                    <h:outputText value="#{f.tipo}" />
                </p:column>

            </p:dataTable>

            <p:panel header="Opciones">
                <h:panelGrid columns="1">
                    <p:commandButton value="Guardar Formulario" update="@form" action="goListarFormulario"
                        actionListener="#{form.guardar}" ajax="false" style="width: 200px;" />
                </h:panelGrid>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>